<div class="wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-base" data-toggle="tab">{:__('基本设置')}</a></li>
        <li><a href="#tab-limit" data-toggle="tab">{:__('限定设置')}</a></li>
    </ul>
    <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <input type="hidden" name="row[scenario]" value="add" />
        <div class="tab-content">
            <div class="tab-pane active" id="tab-base">
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('类型')}:</label>
                    <div class="col-xs-12 col-sm-3">
                        <select id="c-type" class="form-control selectpicker" name="row[type]" title="" style="height:31px;">
                            {foreach name="typeList" item="vo"}
                            <option value="{$key}" {in name="key" value="" }selected{/in}>{$vo}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-title" class="form-control" type="text" name="row[name]" title="" data-rule="required">
                    </div>
                </div>
                <div class="form-group">
                    <label for="c-cover_url" class="control-label col-xs-12 col-sm-2">{:__('封面')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="input-group">
                            <input id="c-cover_url" data-rule="required" class="form-control" size="50" name="row[cover_url]" value="" type="text">
                            <div class="input-group-addon no-border no-padding">
                                <span><button type="button" id="faupload-cover_url" class="btn btn-danger faupload" data-input-id="c-cover_url" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-cover_url"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                <span><button type="button" id="fachoose-cover_url" class="btn btn-primary fachoose" data-input-id="c-cover_url" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                            </div>
                            <span class="msg-box n-right" for="c-cover_url"></span>
                        </div>
                        <ul class="row list-inline faupload-preview" id="p-cover_url"></ul>
                    </div>
                </div>
                <div class="form-group">
                    <label for="c-photos" class="control-label col-xs-12 col-sm-2">{:__('图集')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="input-group">
                            <input id="c-photos" data-rule="required" class="form-control" size="50" name="row[photos]" value="" type="text">
                            <div class="input-group-addon no-border no-padding">
                                <span><button type="button" id="faupload-photos" class="btn btn-danger faupload" data-input-id="c-photos" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-photos"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                <span><button type="button" id="fachoose-photos" class="btn btn-primary fachoose" data-input-id="c-photos" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                            </div>
                            <span class="msg-box n-right" for="c-photos"></span>
                        </div>
                        <ul class="row list-inline faupload-preview" id="p-photos"></ul>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('多规格')}:</label>
                    <div class="col-xs-12 col-sm-2">
                        <input  id="c-multi_spec" name="row[multi_spec]" type="hidden" value="0">
                        <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-multi_spec" data-yes="1" data-no="0">
                            <i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
                        </a>
                    </div>
                </div>
                <div class="form-group hide" id="box-specs">
                    <label class="control-label col-xs-12 col-sm-2">{:__('规格值')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <table class="table fieldlist" data-template="basictpl" data-name="row[specs]" data-type="2" id="c-specs-table">
                            <tr>
                                <th>{:__('名称')}</th>
                                <th>{:__('价格')}</th>
                                <th>{:__('市场价')}</th>
                                <th>{:__('库存')}</th>
                                <th width="100"></th>
                            </tr>
                            <tr>
                                <td colspan="5"><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></td>
                            </tr>
                        </table>
                        <textarea id="c-specs" class="form-control" name="row[specs]" title="" cols="30" rows="5" style="display: none;">[]</textarea>
                        <script id="basictpl" type="text/html">
                            <tr class="form-inline">
                                <td><input class="form-control" type="text" name="<%=name%>[<%=index%>][name]" title="" placeholder="" style="width: 150px"/></td>
                                <td><input class="form-control" type="text" name="<%=name%>[<%=index%>][worth]" title="" placeholder="" style="width: 80px"/></td>
                                <td><input class="form-control" type="text" name="<%=name%>[<%=index%>][amount]" title="" placeholder="" style="width: 60px"/></td>
                                <td class="count-left">
                                    <span class="hide">0</span>
                                    <input class="form-control" type="number" name="<%=name%>[<%=index%>][count_left]" title="" placeholder="" style="width: 60px"/>
                                </td>
                                <td>
                                    <input type="hidden" name="<%=name%>[<%=index%>][id]" title=""/>
                                    <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
                                    <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
                                </td>
                            </tr>
                        </script>
                    </div>
                </div>
                <div class="form-group" id="box-amount-worth">
                    <label class="control-label col-xs-12 col-sm-2">{:__('市场价')}:</label>
                    <div class="col-xs-12 col-sm-3">
                        <input id="c-amount" class="form-control" type="text" name="row[amount]" title="">
                    </div>
                    <label class="control-label col-xs-12 col-sm-2">{:__('价格')}:</label>
                    <div class="col-xs-12 col-sm-3">
                        <input id="c-worth" class="form-control" type="text" name="row[worth]" title="">
                    </div>
                </div>
                <div class="form-group" id="box-count_left">
                    <label class="control-label col-xs-12 col-sm-2">{:__('库存')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-count_left" class="form-control" type="number" name="row[count_left]" title="" value="0">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('内容')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <textarea id="c-content" class="form-control editor" name="row[content]" title="" style="min-height: 500px"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('上架时间')}:</label>
                    <div class="col-xs-12 col-sm-3">
                        <input id="c-start_time"  data-rule="required" class="form-control datetimepicker" type="text" name="row[start_time]" title="" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('下架时间')}:</label>
                    <div class="col-xs-12 col-sm-3">
                        <input id="c-end_time" class="form-control datetimepicker" type="text" name="row[end_time]" title="" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true">
                    </div>
                </div>
                <div class="form-group" id="box-gain_methods">
                    <label class="control-label col-xs-12 col-sm-2">{:__('领取方式')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="checkbox">
                            {foreach name="gainMethods" item="vo"}
                            <label for="c-gain_methods-{$key}"><input id="c-gain_methods-{$key}" class="gain-methods" type="checkbox" name="row[gain_methods][]" value="{$key}" data-tip="{$vo.tip}" {in name="key" value="" }checked{/in}> {$vo.name}</label>
                            {/foreach}
                        </div>
                    </div>
                </div>
                <div class="form-group hide" id="box-offline_place">
                    <label class="control-label col-xs-12 col-sm-2">{:__('线下领取地点')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-offline_place" class="form-control" type="text" name="row[offline_place]" title="" placeholder="如果支持线下领取，最好填写">
                    </div>
                </div>
                <div class="form-group hide" id="box-external_link">
                    <label class="control-label col-xs-12 col-sm-2">{:__('券码外部链接')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-external_link" class="form-control" type="text" name="row[external_link]" title="" placeholder="可以填写第三方兑换页面链接">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('备注')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-note" class="form-control" type="text" name="row[note]" title="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('权重')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-weight" class="form-control" type="number" name="row[weight]" title="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        {:build_radios('row[status]', $statusList, null)}
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="tab-limit">
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('限兑次数')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-limit_user" class="form-control" type="number" name="row[limit_user]" placeholder="针对单个活动用户或者卡密的兑换次数限制，默认0为不限制" title="">
                    </div>
                </div>
                <!--<div class="form-group">-->
                <!--    <label class="control-label col-xs-12 col-sm-2">{:__('限定活动')}:</label>-->
                <!--    <div class="col-xs-12 col-sm-8">-->
                <!--        <input id="c-activity_ids" class="form-control selectpage" type="text"  name="row[activity_ids]" title="" data-multiple="true" data-source="yungift/activity/index">-->
                <!--    </div>-->
                <!--</div>-->
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('限定礼卡')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-card_ids" class="form-control selectpage" type="text"  name="row[card_ids]" title="" data-multiple="true" data-source="yungift/card/main/index">
                    </div>
                </div>
                <!--<div class="form-group">-->
                <!--    <label class="control-label col-xs-12 col-sm-2">{:__('限定分组')}:</label>-->
                <!--    <div class="col-xs-12 col-sm-8 group-tree">-->
                <!--        <input type="hidden" name="row[group_ids]">-->
                <!--        <span class="text-muted"><input type="checkbox" name="" id="checkAll" /> <label for="checkAll"><span>{:__('Check all')}</span></label></span>-->
                <!--        <span class="text-muted"><input type="checkbox" name="" id="expandAll" /> <label for="expandAll"><span>{:__('Expand all')}</span></label></span>-->
                <!--        <div id="treeView"></div>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button class="btn btn-success btn-embossed disabled" type="submit">{:__('OK')}</button>
                <button class="btn btn-default btn-embossed" type="reset">{:__('Reset')}</button>
            </div>
        </div>
    </form>
</div>

<style>
    .wrap {
        margin-top: 30px;
        display: flex;
    }
    .wrap .nav-tabs {
        width: 100px;
        margin-left: 50px;
        border-bottom: none;
    }
    .wrap .form-horizontal {
        flex: 1;
    }

    .nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
        width: 100px;
        text-align: center;
        line-height: 2;
        border: 1px solid #ddd;
        background: #eee;
        color: #555555;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        border: 1px solid #ddd !important;
        font-weight: bold;
    }

    .no-count-left .count-left input {
        display: none !important;
    }
    .no-count-left .count-left span {
        display: block !important;
    }

    /* 分组树 */
    .group-tree {
        margin-top: 8px;
    }
    .group-tree .jstree-themeicon {
        display: none !important;
    }
    .group-tree .text-muted {
        margin-right: 10px;
    }
    .group-tree #treeView {
        margin-top: 5px;
    }
</style>
